<template>
    <div class='cemetery' >
        <el-row class="tac">
            <el-col :span="4" class='cols'>
                <div class='menu'>
                    <el-tree
                        :data="leftMenu"
                        :props="defaultProps"
                        node-key="id"
                        ref="elMenu"
                        show-checkbox
                        check-strictly
                        
                        :default-expanded-keys="defaultShowNodes"
                        @node-click="handleNodeClick2"
                        @check-change="handleNodeClick">
                    </el-tree>
                </div>
                <div class='left_btn'>
                     <div class='cemetery_show'>
                         <div class='cemetery_show_color_1'>
                             &nbsp;
                         </div>
                         未出售
                     </div>

                     <div class='cemetery_show'>
                         <div class='cemetery_show_color_2'>
                             &nbsp;
                         </div>
                         购买
                     </div>

                      <div class='cemetery_show'>
                         <div class='cemetery_show_color_3'>
                             &nbsp;
                         </div>
                         部分安葬
                     </div>

                      <div class='cemetery_show'>
                         <div class='cemetery_show_color_4'>
                             &nbsp;
                         </div>
                         全部安葬
                     </div>
                      <div class='cemetery_show'>
                         <div class='cemetery_show_color_5'>
                             &nbsp;
                         </div>
                         作废
                     </div>
                </div>
                
            </el-col>
            <el-col :span="20" class='cols2'>
                
                <div class='search'>
                </div>
                <div class='contents'  v-loading="loading">
                    <div class='car_row' v-for="(item,index) in rightCememtery" :key="index" :style="item.widths">
                         <div class='card_item' v-for="(child,index2) in item.child" :key="index2">
                            <el-card :body-style="{ padding: '0px' }">
                            
                                <div :class="{gm:true,isActive:selectIndex == index+'-'+index2}" @click="itemClick(item,index,index2)" v-if="child.gm_ex19=='墓穴'">
                                    <div class='gm_child'>
                                        <div :class='child.head' v-if="child.gm_ex6">
                                            {{child.gm_ex6}}
                                        </div>
                                        <div :class='child.head' v-else>
                                            {{child.gm_ex3}}-{{child.gm_ex4}}
                                        </div>
                                        <div class='gm_content' v-html="child.names" :class="child.content">
                                           
                                        </div>
                                        <div style='height:10px'>
                                            &nbsp;
                                        </div>
                                        <div class='bottom_text'>
                                            {{child.gm_ex20}}-{{child.gm_ex21}}
                                        </div>
                                    </div>
                                </div>

                                <div v-if="child.gm_ex19=='空地'" class='kd'>
                                    <div class='kd_child'>
                                    </div>
                                </div>

                            </el-card>
                        </div>
                    </div>
                    


                </div>
                
                
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    props:["exkey","pId","data","gm"],
    data(){
        return{
            leftMenu:[],
            rightCememtery:[],
            gm_id:'1',
            active:'',
            areaId:'',
            loading:false,
            appid:"",
            selectIndex:"-1",
            clickItem:null,
            defaultProps: {
                children: 'child',
                label: 'title'
            },
            defaultShowNodes:[]
            
        }
    },
    created(){
        this.gm_id=this.$route.query.sId;
        this.appid=this.$route.query.appid;
        this.appid="cemetery";
        let sef=this;
        this.loadLeft();
        window.addEventListener('message', function(messageEvent) {
           sef.loadLeft();
        // vue.menuTitle = data;
           // sef.$refs.commonList.isShowTable();
        },false);
    },
    methods: {
        selectOk(){
            if(this.clickItem){
                
                if(this.clickItem["gm_ex9"]!="未出售"&&this.gm!="Y"){
                    
                    this.$message.error('该墓位已出售，不能选择');
                    return false;
                }else if((this.clickItem["gm_ex9"]!="完全安葬"&&this.clickItem["gm_ex9"]!="部分安葬")&&this.gm=="Y"){
                    this.$message.error('该墓位未安葬，不能选择');
                    return false;
                }
                console.log("clickItem===========================");
                console.log(this.clickItem);
                for(let key in this.clickItem){
                    if(key!="c_id")
                    this.$set(this.data[this.pId],key,this.clickItem[key]);
                }
                for(let key in this.exkey){
                    let keys=key.split(".");
                    if(keys.length>1){
                        let pId_=keys[0];
                        this.$set(this.data[pId_],keys[1],this.clickItem[this.exkey[key]]);//这个主要是pId跟当前的pId不是同一个，在exkey里额外指定了

                    }else
                        this.$set(this.data[this.pId],key,this.clickItem[this.exkey[key]]);
                }
                this.$set(this.data[this.pId],"gm_ex9","购买");
                this.$set(this.data[this.pId],"c_ex9","购买");

                let gm_ex11=this.clickItem["gm_ex11"];
                this.$post("cemetery","byg/funeral/getFuneralSfItem",{"cname":gm_ex11,"ctype":"墓型"}).then(data=>{
                    let index=-1;
                    let item=this.data["item"];
                    for(let i=0;i<item.length;i++){
                        let szi_ex7=item[i].szi_ex7;
                        if(szi_ex7=="墓型"){
                            index=i;
                        }
                    }
                    if(index>=0){
                        this.$delete(this.data["item"],index);
                    }
                    this.$set(this.data["item"],this.data.item.length,data.item[0]);
                });
                return true;
            }else{
                 this.$message.error('请先选择一个墓位');
                 return false;
            }
            
        },
        openAddArea(url){
               let pId=this.areaId;
               if(!pId){
                   pId="-1";
               }
            //if(this.areaId){
                let datas={};
                datas.buttonName="新增区";
                datas.url=url;
                datas.exId=this.gm_id;
                datas.sId="";
                datas.pId=pId;
                datas.width="500px";
                datas.height="350px";
                datas.filename2="公墓信息管理系统/业务管理/墓区管理/新增墓区";
                datas.appid="business";
                this.$emit("openWin",JSON.stringify(datas))
                //parent.postMessage(JSON.stringify(datas),'*');
           /* }else{
                this.$alert('请先选择一行数据', '错误提示', {
                    confirmButtonText: '确定',
                    callback: action => {}
                });
                return;
            }*/
            
        },
        openEditArea(url){
            if(this.areaId){
                let datas={};
                datas.buttonName="修改区";
                datas.url=url;
                datas.exId=this.gm_id;
                datas.sId=this.areaId;
                datas.width="500px";
                datas.height="350px";
                datas.filename2="公墓信息管理系统/业务管理/墓区管理/修改墓区";
                datas.appid="business";
                this.$emit("openWin",JSON.stringify(datas))
                //parent.postMessage(JSON.stringify(datas),'*');
            }else{
                this.$alert('请先选择一行数据', '错误提示', {
                    confirmButtonText: '确定',
                    callback: action => {}
                });
                return;
            }
            
        },
        openWin(url){
            let urls=url.split("#");
            let datas={};
            datas.buttonName=urls[0];
            datas.url=urls[1];
            datas.pId=this.gm_id;
            datas.exId=this.areaId;
            datas.width="650px";
            datas.height="450px";
            datas.filename2=urls[2];
            datas.appid=urls.length>3 ? urls[3]:"business";
            this.$emit("openWin",JSON.stringify(datas))
           // parent.postMessage(JSON.stringify(datas),'*');
        },
        openWin2(url){
            let urls=url.split("#");
            let datas={};
            datas.buttonName=urls[0];
            datas.url=urls[1];
            datas.sId=this.areaId;
            datas.exId=this.gm_id;
            datas.width="650px";
            datas.height="450px";
            datas.filename2=urls[2];
            datas.appid=urls.length>3 ? urls[3]:"business";
            this.$emit("openWin",JSON.stringify(datas))
           // parent.postMessage(JSON.stringify(datas),'*');
        },
        initData(){
            this.loadLeft();
        },
        goSearch(){
            this.loadLeft();
            
        },
        loadLeft(){
            console.log("appid========="+this.appid);
            this.$post(this.appid,"/cemetery/getAarea",{gm_id:this.gm_id}).then(data=>{
                this.leftMenu=data;
                let child=null;
                if(this.leftMenu.length>0){
                    if(this.active){
                         this.defaultShowNodes=[];
                         this.defaultShowNodes.push(this.active);
                         this.loadRight(this.active)
                    }else{
                        let isOk=true;
                        child=this.leftMenu[0].child;
                        while(isOk){
                            if(child.length>0){
                                if(child[0].child&&child[0].child.length>0)
                                    child=child[0].child;
                                else
                                    isOk=false;
                            }else{
                                isOk=false;
                            }
                        }
                        this.active=child[0].id;
                        this.loadRight(child[0].id)
                        this.defaultShowNodes=[];
                        this.defaultShowNodes.push(child[0].id);
                        
                        this.gm_id=child[0].pId;
                        this.areaId=child[0].id;
                        this.$refs.elMenu.setCheckedKeys([child[0].id]);
                    }
                    
                }else{
                     this.loading=false;
                    
                }
               
                
            })
        },
        loadRight(id){

           this.loading=true;
           this.areaId=id;
           this.$post(this.appid,"/cemetery/getCemetery",{areaId:id}).then(data=>{
               this.rightCememtery=data.data;
               this.loading=false;
           })
        },
        itemClick(item,index,index2){
            this.selectIndex=index+"-"+index2;
            console.log(item)
            this.clickItem=item.child[index2];
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClick(command){
            let vals=command.split("#");
            if(vals.length==5){

                let datas={};
                datas.buttonName=vals[0];
                datas.url=vals[1];
                datas.sId=vals[3];
                datas.filename2=vals[2];
                datas.appid=vals[4];

                
                this.$emit("openWin",JSON.stringify(datas))


               
               // parent.postMessage(JSON.stringify(datas),'*');
            }else{
                this.$confirm(vals[0], '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    
                    this.$post(vals[3],vals[1],{filename:vals[2]}).then(data=>{
                        if(data[0].status=="+OK"){
                            this.$message(unescape(data[0].msg));
                            this.goSearch()
                        }else{
                            this.$alert(unescape(data[0].msg), '错误提示', {
                                confirmButtonText: '确定',
                                callback: action => {}
                            });
                        }
                    });
                }).catch(() => {
                            
                });
            }
           
        },
        handleNodeClick(data, checked, node) {
            if(checked === true) {
                this.areaId=data.id;
                this.gm_id=data.pId;
                this.checkedId = data.id;
                this.active=this.areaId;
                this.$refs.elMenu.setCheckedKeys([data.id]);
                this.loadRight(data.id)
            } else {
                if (this.checkedId == data.id) {
                    this.$refs.elMenu.setCheckedKeys([data.id]);
                }
            }
        },
        handleNodeClick2(data) {
            this.areaId=data.id;
            this.gm_id=data.pId;
            this.checkedId = data.id;
            this.active=this.areaId;
            this.$refs.elMenu.setCheckedKeys([data.id]);
            this.loadRight(data.id)
        }
    },
    watch:{
        active(val, oldVal){
            console.log("val===s=s=="+val+"="+oldVal);
        }
    }
}
</script>
<style scoped>
    .cemetery{
        height:100%;
        width:100%;
        border-top:1px solid #ddd;
        border-bottom:1px solid #ddd;
    }
    .tac{
        height:100%;
        width:100%;
    }
    .cols{
        height:100%;
        display:flex;
        flex-direction: column;
    }
    .menu{
        flex:1;
    }
    .btnss{
        height:55px;
        border-bottom:1px solid #ddd;
    }
    .search{
        
    }
    .cols2{
        height:100%;
        padding:10px;
        display: flex;
        flex-direction: column;
    }
    .contents{
        flex: 1;
        overflow:auto;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        padding:10px;
        padding-top:20px;
    }
    .el-menu{
        height:100%;
    }
    .car_row{
        white-spacing:nowrap;
        
    }
    .card_item{
        width:100px;
        display: inline-block;
        /*margin-left:10px;
        margin-top:10px;*/
        cursor: pointer;
        float:left;
    }

    .card_item img{
        height:100px;
    }
    .gm{
        height:100px;
        width:98px;
        box-sizing: border-box;
        background-repeat: no-repeat;
        overflow:hidden;
        background-size:  100% 100%;
        background-image:url('../../assets/img/gm/gm.png');
        
    }
    .gm_child{
        background:rgb(255,255,255,0.8);
        height:100px;
        display: flex;
        flex-direction: column;
    }
    .gm_content{
          flex:1;
        /*vertical-align: middle;
        text-align: center;*/
        display: flex;
        flex-direction: row;
        justify-content: center;
        /*justify-content: center;*/
        font-size:14px;
        /*align-items:center;*/
        flex-wrap: wrap;
    }
    .head{
        text-align: center;
        padding-top:5px;
        width:100%;
        background:cornflowerblue;
        color:#fff;
        padding-bottom:5px;
        font-size:12px;
    }
    .head2{
        text-align: center;
        padding-top:5px;
        width:100%;
        background:#1ea44d;
        color:#fff;
        padding-bottom:5px;
    }
    .head3{
        text-align: center;
        padding-top:5px;
        width:100%;
        background:indianred;
        color:#fff;
        padding-bottom:5px;
        font-size:10px;
    }
    .head4{
        text-align: center;
        padding-top:5px;
        width:100%;
        background:indigo;
        color:#fff;
        padding-bottom:5px;
    }
    .head5{
        text-align: center;
        padding-top:5px;
        width:100%;
        background:rgb(111, 122, 7);
        color:#fff;
        padding-bottom:5px;
    }

    .content_text{
        color:cornflowerblue;
    }
    .content_text2{
        color:#1ea44d;
    }
    .content_text3{
        color:indianred;
    }
    .content_text4{
        color:indigo;
    }
    .content_text5{
        color:rgb(111, 122, 7);
    }
    .left_btn{
        border-right:1px solid #ddd;
        border-top:1px solid #ddd;
        padding-top:10px;
        padding-bottom:10px;
        background:beige;
    }
    .cemetery_show{
        display:inline-block;
        margin-left:10px;
        font-size:12px;
        vertical-align: middle;
        line-height: 25px;
    }
    .el-card{
        border-radius: 0;;
    }
    .cemetery_show_color_1{
        display:inline-block;
        width:15px;
        height:15px;
        background:cornflowerblue;
        vertical-align: middle;
    }
    .cemetery_show_color_2{
        display:inline-block;
        width:15px;
        height:15px;
        background:#1ea44d;
        vertical-align: middle;
    }
     .cemetery_show_color_3{
        display:inline-block;
        width:15px;
        height:15px;
        background:indianred;
        vertical-align: middle;
    }
     .cemetery_show_color_4{
        display:inline-block;
        width:15px;
        height:15px;
        background:indigo;
        vertical-align: middle;
    }
    .cemetery_show_color_5{
        display:inline-block;
        width:15px;
        height:15px;
        background :rgb(111, 122, 7);
        vertical-align: middle;
    }
   
    .bottom{
        text-align:center;
        padding-bottom:15px;
        color:cornflowerblue;
    }
    .el-dropdown{
        color:cornflowerblue;
        cursor: pointer;
    }
    
  
   .kd{
        height:100px;
        width:100px;
        background-repeat: no-repeat;
        background-size:  100% 100%;
        background-image:url('../../assets/img/gm/kd.png');
        
    }
     .kd_child{
        background:rgb(255,255,255,0.9);
        height:100px;
        display: flex;
        flex-direction: column;
    }
    .el-dropdown{
        font-size:12px;
    }
    .isActive{
        border:1px solid blue;
    }
</style>
<style >
.gms{
    margin-left:3px;
    margin-top:3px;
    width:44%;
    border-radius: 60px 60px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:8px;
}
.gm_death{
    background:indigo;
    color:#fff;
}
.gm_death2{
    background:indianred;
    color:#fff;
}
.gm_gm{
    background:#1ea44d;
    color:#fff;

}
.gm_nodeath{
    background:#1ea44d;
    color:#fff;
}
.gm_nogm{
    background:cornflowerblue;
    color:#fff;
}
.bottom_text{
    text-align:center;
    font-size:12px;
    background:#1ea44d;
    color:#fff;
}
</style>